<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>
    <script type="text/javascript" src="../js/template/handlebars-v1.3.0.js"></script>
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>

    <title>商品详情</title>
    <script>
        $(function(){
            $.getJSON(
                    "../json/product_detail.json",
                    function(data, status) {
                        var strJson = '{"id":"19","admin_id":"55","uuid":"","module_id":"51","pic_id":"20","name":"\u65e5\u672c\u5bcc\u58eb","price":"9999.99","type":"","star":"0","paid":"0","popularity":"0","show_order":"1","description":"\u4e1c\u4eac\u7545\u6e38\u8d85\u503c\u4e94\u5929","content":"<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<\/p><p><span class=\"s1\" style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent; word-break: break-all;\">\u6210\u4eba\uff1a<\/span>&nbsp;<span class=\"s2\" style=\"margin: 0px 5px 0px 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent; word-break: break-all; color: rgb(255, 102, 0);\">\u00a5<span id=\"adultsTip\" style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent; word-break: break-all;\">4380.00<\/span><\/span>&nbsp;<span class=\"s1\" style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent; word-break: break-all;\">\u8865\u623f\u5dee\uff1a<\/span><span class=\"s2\" id=\"roomDiffTip\" style=\"margin: 0px 5px 0px 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent; word-break: break-all; color: rgb(255, 102, 0);\">\u00a51800.00<\/span><\/p><p><span class=\"s1\" style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent; word-break: break-all;\">\u5269\u4f59\u540d\u989d\uff1a<\/span><span class=\"s2\" id=\"residueNumTip\" style=\"margin: 0px 5px 0px 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent; word-break: break-all; color: rgb(255, 102, 0);\">&nbsp;\u540d\u989d\u5145\u8db3<\/span><\/p><p>&nbsp; &nbsp;<br\/><\/p>","begin_time":"2014 \u516d\u6708 25","end_time":"2014 \u516b\u6708 06","created_time":"1403515897","updated_time":"1403515897","sensitize":"1","del":"0","module_name":"\u4e3b\u9898\u6e38","pic_directory":"admin\/uploads\/201406\/53a7f3f93ad80.jpg","pic_name":"1347970045653","img":"admin\/uploads\/201406\/53a7f3f93ad80.jpg"}';
                        var dataObj=eval("("+strJson+")");
                        //var dataObj = jQuery.parseJSON(strJson);
                        /**
                         * 访问json数据的每个value值
                         **/
                        $(".product_name").text(dataObj.name);
                        $(".product_img").attr("src","../pic/product_list/" + dataObj.img);
                        $("#price").text(dataObj.price);
                        $(".view-introduce").append(dataObj.content);
                        $("#btn-buy").attr("href","book_comfire.html?product_id=" + dataObj.id);
                    });
        });
    </script>
</head>
<body>
<header data-role="header" data-theme="b">
    <h1>商品详情</h1>
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">返回</a>
</header>
<!--
    由于jquery mobile的机制
    需要加载js，css等内容，得
    在data-role="content"内
    写入js和css
-->
<div data-role="content" class="content">
    <!--外部样式开始-->
    <link rel="stylesheet" href="../css/product_detail/productdetail.css">
    <link rel="stylesheet" href="../css/product_detail/productImg.css">
    <link rel="stylesheet" href="../css/product_detail/bottomDiv.css">
    <!--外部样式结束-->
    <h3 class="product_name">
        港澳三天游
    </h3>

    <div class="img_price">
        <img src="../pic/product_detail/hongkong.jpg"/>

        <div class="priceTag">
            <span class="discount-price">¥<em id="price" class="special-discount">588.00</em></span>
        </div>
    </div>
    <button class="ui-btn ui-btn-icon-left ui-icon-phone ui-btn-a" href="tel:10086">电话预定</button>
    <a href="book_comfire.html" data-role="button" class="ui-btn ui-btn-icon-left ui-icon-tag" data-theme="b" data-corners="false">添加进购物车</a>
    <hr/>

    <div data-role="collapsibleset" data-theme="a" data-content-theme="a">
        <div data-role="collapsible">
            <h3>景点介绍</h3>
            <p class="view-introduce">
            </p>
        </div>
    </div>

    <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li data-theme="c"
            class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-corner-top ui-btn-up-c">
            <div class="ui-btn-inner ui-li ui-corner-top">
                <div class="ui-btn-text">
                    <img src="../pic/product_detail/hongkong_min.jpg" class="ui-li-thumb ui-corner-tl">
                    <h2 class="ui-li-heading"> 风景相册</h2>
                    <p class="classement four ui-li-desc"> 点击查看更多 </p>
                </div>
                <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
            </div>
        </li>
    </ul>
    <!--
        底部浮动栏
    -->
    <div>
        <div class="buy-box" style="position: fixed; bottom: 0px;">
            <span class="new-price">¥588</span>
            <span class="old-price">¥600</span>
            <a href="#" class="J_buy y-btn f-r"> 立即购买</a>
        </div>
    </div>
</div>
</body>
</html>